<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        #box{
            position: absolute;
        }
        #msg{
            width: 100px;
            height: 50px;
            position: absolute;
            top:10px;
            left: 10px;
            color:#f00;
            font-size: 50px;
            z-index: 9;
        }
        #gg{
            width: 200px;
            height: 100px;
            position: absolute;
            top: 30%;
            left: 30%;
            background-color: #fed;
            font-size: 25px;
            z-index: 9;
            display: none;
        }
    </style>
</head>
<body>
    <p oncopy="copy()">
        日照香炉生紫烟,遥看瀑布挂前川
    </p>
    <input type="text" oncut="cut()" value="剪切我">
    <p id="ts">暂无操作</p>
    <input type="text" onpaste="paste()" placeholder="在此处黏贴">
    <br>
    <br>
    <hr>
    <font size="6" color="#f00" id="info">暂无操作</font>
    <br>
    <audio controls onplay="b()" onpause="z()"" onended="t()">
        <source src="./media/we will rock you.mp3">
        浏览器不支持audio标签
    </audio>

    <div id="box">
        <video id="vv" width="600" controls onplay="bf()" onpause="zt()" onended="tz()">
            <source src="./media/奥斯卡最佳视觉效果提名混剪.mp4" type="video/mp4">
            浏览器不支持 video 标签,请使用XXX浏览器
        </video>
        <div id="msg">操作</div>
        <div id="gg">此处广告位招租 <br> 猛戳此处购买</div>
    </div>
</body>
    <script>
        var ts = document.getElementById("ts");

        function copy(){
            ts.innerHTML = "复制";
        }
        function cut(){
            ts.innerHTML = "剪切";
        }
        function paste(){
            ts.innerHTML = "黏贴";
        }
        function b(){
            info.innerHTML = "播放";
        }
        function z(){
            info.innerHTML = "暂停";
        }
        function t(){
            info.innerHTML = "停止";
        }
        function bf(){
            msg.innerHTML = "播放";
        }
        function zt(){
            msg.innerHTML = "暂停";
        }
        function tz(){
            msg.innerHTML = "停止";
        }

        vv.onclick = function(){
            if(vv.paused)
            {
                gg.style.display = "none";
            }
            else
            {
                gg.style.display = "block";
            }
        }
    </script>
</html>